/* 按钮样式 */
.deleteButton {
  border-radius: 3px;
  font-size: 14px;
  padding: 8px 18px;
}

/* 自定义表格样式 */
.customTable {
  border-spacing: 0 10px;
  border-collapse: separate;
}

/* 表体样式 */
.customTable :global(.ant-table-tbody > tr > td) {
  padding: 8px;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
}

/* 表体行样式 */
.customTable :global(.ant-table-tbody > tr) {
  background-color: #fff;
}

/* 表头样式 */
.customTable :global(.ant-table-thead > tr > th) {
  padding: 5px;
  background-color: #fafafa;
}

/* 隔行换色核心样式 */
.oddRow {
  background-color: #ffffff !important;
}

.evenRow {
  background-color: #f8f9fa !important;
}

/* 筛选区（标签按钮组）样式 */
.filterBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  /* 允许换行 */
  gap: 15px;
  /* 换行后间距 */
}

.filterLeftGroup {
  gap: 12px;
  /* 小屏减小间距，原40px太宽 */
  display: flex;
  flex-wrap: wrap;
  /* 按钮组自动换行 */
}

/* 搜索区外层布局 */
.searchBar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
  /* 行内/换行间距统一 */
  align-items: center;
  width: 100%;
}

/* 左侧搜索组件容器 */
.searchLeftContainer {
  display: flex;
  align-items: center;
  width: 100%;
  /* 小屏占满宽度 */
}

.filterRightGroup{
  display: flex;
  gap: 25px;
  justify-content: flex-start;

}

/* 搜索组件组 */
.searchGroup {
  display: flex;
  gap: 12px;
  /* 组件间距优化 */
  width: 100%;
  justify-content: flex-start;
}

/* 带图标的输入框容器 */
.searchInputWrapper {
  position: relative;
  flex: 1;
  /* 自适应宽度 */
  min-width: 110px;
  /* 最小宽度，避免过窄 */
  max-width: 160px;
  /* 最大宽度，保持统一 */
}

/* 搜索输入框样式 */
.searchInput {
  width: 100% !important;
  border-radius: 3px !important;
  padding-right: 30px !important;
  height: 32px !important;
}

/* 搜索图标样式 */
.searchIcon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
}

/* 下拉框/级联选择器/日期选择器 统一样式 */
.searchSelect,
.searchCascader,
.searchDatePicker {
  flex: 1;
  /* 自适应宽度 */
  min-width: 150px;
  max-width: 160px;
  border-radius: 3px !important;
  height: 32px !important;
}

/* 新增按钮容器 */
.addButtonContainer {
  display: flex;
  align-items: center;
  width: 100%;
  /* 小屏占满宽度 */
  justify-content: flex-start;
  /* 小屏按钮居左 */
}

/* ================================= 响应式媒体查询 ================================= */
/* 1. 平板及以上（屏幕 ≥ 768px） */
@media (min-width: 768px) {

  /* 筛选区按钮组间距恢复适中 */
  .filterLeftGroup {
    gap: 20px;
  }

  /* 搜索区布局调整 */
  .searchLeftContainer {
    width: auto;
    /* 不占满宽度，与按钮并排 */
  }

  .addButtonContainer {
    width: auto;
    justify-content: flex-end;
    /* 按钮居右 */
  }

  /* 搜索组件宽度优化 */
  .searchInputWrapper,
  .searchSelect,
  .searchCascader,
  .searchDatePicker {
    max-width: 180px;
    /* 平板端适当加宽 */
  }
}

/* 2. 电脑大屏（屏幕 ≥ 1200px） */
@media (min-width: 1200px) {

  /* 筛选区按钮组间距恢复原设计 */
  .filterLeftGroup {
    gap: 40px;
  }

  /* 搜索组件恢复原宽度 */
  .searchInputWrapper,
  .searchSelect,
  .searchCascader,
  .searchDatePicker {
    max-width: 160px;
  }

  /* 表格字体放大，适配大屏 */
  .customTable :global(.ant-table-tbody > tr > td) {
    font-size: 13px;
  }

  .customTable :global(.ant-table-thead > tr > th) {
    font-size: 14px;
  }
}

/* 3. 手机小屏（屏幕 ≤ 480px） */
@media (max-width: 480px) {

  /* 按钮样式紧凑化 */
  .deleteButton {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* 筛选区按钮组间距最小化 */
  .filterLeftGroup {
    gap: 8px;
  }

  /* 搜索组件一行最多2个，平分宽度 */
  .searchInputWrapper,
  .searchSelect,
  .searchCascader,
  .searchDatePicker {
    max-width: calc(50% - 6px);
    /* 减去一半间距 */
    min-width: 100px;
  }

  /* 搜索区间距减小 */
  .searchBar {
    gap: 10px;
  }

  .searchGroup {
    gap: 8px;
  }

  /* 表格内边距减小，避免挤压 */
  .customTable :global(.ant-table-tbody > tr > td) {
    padding: 6px 4px;
    font-size: 11px;
  }

  .customTable :global(.ant-table-thead > tr > th) {
    padding: 4px;
    font-size: 12px;
  }
}

/* 关键：确保 flex 布局生效，添加 !important 覆盖优先级 */
.tabContent {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.tabTitle {
  color: #333;
  font-weight: bold;
}

/* 编辑按钮样式（可选，优化交互） */
.editBtn {
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

/* 信息网格布局 - 3列均匀分布 */
.infoGrid {
  display: grid;
  grid-template-columns: repeat(3, 0.5fr);
  gap: 10px;
  padding: 10px 0;
}

/* 单个信息项 - 标签+内容/输入框 垂直对齐 */
.infoItem {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 标签样式 - 统一宽度、字体加粗，与图片二一致 */
.label {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

/* 输入框样式 - 与普通文本区域视觉统一，无突兀感 */
.input {
  width: 100%;
  max-width: 280px;
  height: 36px;
}

/* 普通文本内容样式 - 与输入框对齐，保持视觉一致 */
.content {
  width: 100%;
  max-width: 280px;
  height: 36px;
  line-height: 36px;
  /* 与输入框高度一致，垂直居中 */
  font-size: 14px;
  color: #333;
  border: 1px solid transparent;
  /* 透明边框，与输入框视觉平衡 */
  border-radius: 4px;
  padding: 0 8px;
  /* 与输入框内边距一致 */
}

/* 响应式调整 - 小屏幕自动换行 */
@media (max-width: 1200px) {
  .infoGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .infoGrid {
    grid-template-columns: 1fr;
  }
}